/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React, { ReactNode, useState } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  Alert,
  StyleSheet,
  ScrollView
} from 'react-native';
import Clipboard from '@react-native-clipboard/clipboard';

const ClipboardExample = (): ReactNode => {
  // 状态管理
  const [copyText, setCopyText] = useState(''); // 复制文本输入


  // 处理文本复制
  const handleCopyText = async (): Promise<void> => {
    if (!copyText.trim()) {
      Alert.alert('提示', '请输入要复制的文本');
      return;
    }
    try {
      await Clipboard.setString(copyText);
      Alert.alert('成功', '文本已复制到剪贴板');
    } catch (error) {
      Alert.alert('错误', '复制文本失败');
    }
  };



  return (
    <ScrollView contentContainerStyle={styles.container}>
      {/* 复制区 */}
      <View style={styles.section}>
        <Text style={styles.title}>复制区</Text>

        <TextInput
          style={styles.textInput}
          placeholder="请输入要复制的文本"
          value={copyText}
          onChangeText={setCopyText}
          multiline
        />

        <TouchableOpacity style={styles.button} onPress={handleCopyText}>
          <Text style={styles.buttonText}>复制文本</Text>
        </TouchableOpacity>
      </View>

      {/* 粘贴区 */}
      <View style={styles.section}>
        <Text style={styles.title}>粘贴区</Text>
        <View style={styles.pasteArea}>
          <TextInput
            style={styles.pastedTextInput}
            multiline
            placeholder="长按此处粘贴"
          />
        </View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    padding: 20,
    paddingTop: 100,
    backgroundColor: '#f5f5f5',
  },
  section: {
    marginBottom: 30,
    backgroundColor: 'white',
    padding: 15,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
    elevation: 2,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 15,
    color: '#333',
  },
  textInput: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 4,
    padding: 10,
    marginBottom: 15,
    minHeight: 40,
    textAlignVertical: 'top',
  },
  pastedTextInput: {
    width: '100%',
    height: 50,
    textAlign: 'center',
  },
  button: {
    backgroundColor: '#007AFF',
    paddingVertical: 12,
    paddingHorizontal: 20,
    borderRadius: 6,
    alignItems: 'center',
    marginBottom: 10,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
  pasteArea: {
    minHeight: 150,
    borderWidth: 2,
    borderColor: '#ddd',
    borderStyle: 'dashed',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 15,
  },
  pasteHint: {
    fontSize: 16,
    color: '#999',
    marginBottom: 10,
  },
  pastedText: {
    fontSize: 14,
    color: '#333',
    marginTop: 10,
    textAlign: 'center',
  },
  pastedImage: {
    width: 200,
    height: 150,
    resizeMode: 'contain',
    marginTop: 15,
    borderRadius: 4,
  },
});

export default ClipboardExample;